import React, { useEffect, useState } from 'react';
import Swiper from "@/util/swiper";
import LazyLoad from 'react-lazyload';
import { Row, Col } from "antd";
import { enquireScreen } from "enquire-js";

const Content = ({ dataSource, isMobile, ...props }) => {
  const [mySwiper, setMySwiper] = useState(null);
  //const [isMobile, setIsMobile] = useState(false);
  const companyList = [
    // {
    //   id: 'qdm', 
    //   title: '钱大妈', 
    //   img: 'https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/qdm_circle.png',
    //   h5img :'https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/qdm_h5_logo.png',
    //   desc: '贵司丰富的云原生实时数据湖建设经验、成熟的技术和产品，专业的实施团队，保障了项目的顺利实施',
    // },
    {
      id: 'sfgj', 
      title: '顺丰国际', 
      img: 'https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/sfsy_logo_circle.png',
      h5img: 'https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/sfgj_h5_logo.png',
      desc: '依托其研发团队提供的云原生实时数据湖能力，解决了我方的实际场景问题，顺利的保障了我方海外数据中心的建设和上线运营，有力的支撑了顺丰速运在全球范围的国际业务的发展'
    },
    {
      id: 'gldc', 
      title: '格力地产', 
      img: 'https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/gldc_cricle.png', 
      h5img: 'https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/gldc_h5_logo.png',
      desc: '格力地产沉淀了海量会员，但精细化运营未达预期。基于云原生实时数据湖搭建客户经营平台，打通线上线下、免税和跨境用户流量，提升免税私域用户的复购率和粘性，让跨境业务的收入实现增长'
    },
  ]
  const [sliderText, setSliderText] = useState(companyList[0].desc);

  const myPlugin = ({ swiper, extendParams, on }) =>{
    on("slideChangeTransitionEnd", () => {
      const { realIndex } = swiper;
      setSliderText(companyList[realIndex].desc);
      // if ([2,5].includes(activeIndex)) {
      //   setSliderText(companyList[0].desc);
      // } else if ([3,6].includes(activeIndex)) {
      //   setSliderText(companyList[1].desc);
      // } else if ([4].includes(activeIndex)){
      //   setSliderText(companyList[2].desc);
      // }
    });
  }

  const slideToPrev = () => {
    mySwiper.slidePrev();
  }

  const slideToNext = () => {
    mySwiper.slideNext();
  }

  const resizeUpdate = () => {
    if (mySwiper) {
      mySwiper.destroy();
    }
    const config = isMobile ? {
      slidesPerView: 'auto',
      spaceBetween: 8,
    }:{
      loop: true,
      slidesPerView: 2,
      spaceBetween: 30,
      modules: [myPlugin],
    }
    const swiper = new Swiper(".mySwiper", config);
    setMySwiper(swiper);
  }

  useEffect(() => {
    //监听窗口
    resizeUpdate();
    window.addEventListener('resize', resizeUpdate);
    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  },[isMobile])

  const {
    wrapper,
    title,
    content,
    subtitle,
  } = dataSource;
  return (
    <div {...wrapper}>
      <div className='c-grid-layout'>
        <div className='content8-center'>
          <div className={title.className}><p>{title.children}</p></div>
          <div className='content8-brand'>
            <div className="swiper mySwiper">
              <div className="swiper-wrapper">
                {companyList.map(i => 
                  <div className="swiper-slide" key={i.id}>
                    <div className='slider-inner'>
                      <div className={isMobile ? 'h5_box':'box'}>
                        <div className="img-content">
                          <img src={isMobile ? i.h5img:i.img}></img>
                        </div>
                        <p className='slider-title'>{isMobile ? i.desc:i.title}</p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className={subtitle.className}>
            <div className='slider-control'>
              <LazyLoad>
                <img onClick={slideToPrev} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/prev.png'></img>
              </LazyLoad>
            </div>
            <div className='slider-bottom-text'>
              <div>
                <LazyLoad>
                  <img src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/quotation-left.png'></img>
                </LazyLoad>
              </div>
              <p>{sliderText}</p>
              <div>
                <LazyLoad>
                  <img src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/quotation-right.png'></img>
                </LazyLoad>
              </div>
            </div>
            <div className='slider-control'>
              <LazyLoad>
                <img onClick={slideToNext} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/next.png'></img>
              </LazyLoad>
            </div>
          </div>
          <div className={content.className}>
            <div className='content8-flex'>
              <Row gutter={[10, 10]}>
                { content.children.map((i,key) => 
                  <Col span={6} key={key}>
                    <div key={key} className='item'>
                      <LazyLoad>
                        <img src={i.img}></img>
                      </LazyLoad>
                    </div>
                  </Col>
                )}
              </Row>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Content;
